<template>
  <div class="setting">
    <div class="center_box">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="头像"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="http://101.43.97.15:3000/upload "
            @change="handleChange"
          >
            <client-only>
              <div class="upload_box">
                <img
                  v-if="formState.headPhoto"
                  :src="formState.headPhoto"
                  alt="avatar"
                  class="faceImg"
                />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                  <div class="ant-upload-text">Upload</div>
                </div>
              </div>
            </client-only>
          </a-upload>
        </a-form-item>

        <a-form-item
          label="用户名"
          name="userName"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input v-model:value="formState.userName" />
        </a-form-item>
        <a-form-item label="真实姓名" name="cetName">
          <a-input v-model:value="formState.cetName" disabled />
        </a-form-item>
        <a-form-item label="邮箱" name="eMail">
          <a-input v-model:value="formState.eMail" disabled />
        </a-form-item>
        <a-form-item label="联系电话" name="mobile">
          <a-input v-model:value="formState.mobile" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { UploadChangeParam } from "ant-design-vue";
import { message } from "ant-design-vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue/lib/icons";
import { useUserInfo } from "~~/store/userInfo.store";
import { UserInterface } from "~~/types";

useHead({
  title: "用户详情",
});
interface FormState {
  userName: string;
  eMail: string;
  headPhoto: string;
  cetName: string;
  mobile: string;
}
const formState = ref<FormState>({
  userName: "",
  eMail: "",
  headPhoto: "",
  cetName: "",
  mobile: "",
});

const loading = ref<boolean>(false);

const getUserUtils = async () => {
  let userId = useCookie("userId");
  const { data } = await useMyFetch<UserInterface>(`/user/${userId.value}`, {
    method: "GET",
  });
  formState.value.eMail = data?.eMail ?? "";
  formState.value.headPhoto = data?.headPhoto ?? "";
  formState.value.userName = data?.userName ?? "";
  formState.value.cetName = data?.cetName ?? "";
  formState.value.mobile = data?.mobile ?? "";
};
getUserUtils();
const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === "uploading") {
    loading.value = true;
    return;
  }
  if (info.file.status === "done") {
    const { data } = info.file.response;
    formState.value.headPhoto = data.fileUrl;
  }
  if (info.file.status === "error") {
    loading.value = false;
    message.error("upload error");
  }
};

const onFinish = async (values: any) => {
  let userInfo = useUserInfo();
  let id = userInfo.getUserInfo?.id ?? "";
  const { data } = await useMyFetch(`/user/${id}`, {
    method: "PATCH",
    body: formState,
  });
  if (data) {
    userInfo.userInfo!.mobile = formState.value.mobile;
    userInfo.userInfo!.userName = formState.value.userName;
    userInfo.userInfo!.headPhoto = formState.value.headPhoto;
    message.success("保存成功");
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>

<style lang="scss" scoped>
.setting {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .center_box {
    width: 800px;
    height: 400px;
  }

  .faceImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .upload_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
